<template>
  <div class="nav_father">
    <NavLogo />
    <ul>
      <router-link to="/index">
        <li>
          <span>主页</span>
        </li>
      </router-link>
      <router-link to="/index">
        <li>
          <span>关于</span>
        </li>
      </router-link>
      <router-link to="/index">
        <li>
          <span>上新</span>
        </li>
      </router-link>
      <router-link to="/product">
        <li
          v-on:mouseenter="hoverHandle(item.value, item.item)"
          v-on:mouseleave="leaveHandle(item.value, item.item)"
          v-for="item in this.$parent.nav"
          :key="item.id"
          @click="typeHandle(item.value)"
        >
          <span>{{ item.value }}</span>
          <img
            v-show="item.item.length > 0"
            class="arrow"
            src="../../../../static/icons/arrow-right.svg"
            alt=""
          />
        </li>
      </router-link>
    </ul>
  </div>
</template>

<script>
import NavLogo from "./logo.vue";
export default {
  name: "nav_father",
  data() {
    return {};
  },
  components: {
    NavLogo,
  },
  mounted() {},
  methods: {
    hoverHandle: function (title, item) {
      if (item.length <= 0) {
        return false;
      }
      this.$parent.hoverHandle(title, item);
    },
    leaveHandle(title, item) {
      if (item.length <= 0) {
        return false;
      }
      this.$parent.leaveHandle();
    },
    // 切换类型，以达到改变商品列表的目的
    typeHandle(type) {
      this.$store.state.typeFilter.type = type;
      this.$store.dispatch("updateShowProductList");
    },
  }, // methods
};
</script>

<style lang="scss" scoped>
.nav_father {
  // background: #e1e1e1;
  a:hover {
    a:after {
      width: 100%;
      transition: 0.3s;
    }
  }
  height: 100%;
  ul {
    padding: 20px 10px 20px 40px;
    width: calc(100% - 50px);
    list-style: none;
    font-size: 0.9rem;
    li {
      text-align: left;
      height: 40px;
      line-height: 40px;
      margin-bottom: 2px;
      border-bottom: 0px;
      position: relative;
      overflow: visible;
      cursor: pointer;
      .arrow {
        width: 12px;
        margin-top: 12px;
        float: right;
      }
      span {
        color: #5d5d60;
        position: relative;
        cursor: pointer;
      }
      span:after {
        content: "";
        position: absolute;
        width: 0%;
        height: 1px;
        background: #d1d1d1;
        transition: 0.3s;
        left: 0;
        bottom: -2px;
      }
    }
    li:hover {
      span:after {
        width: 100%;
        transition: 0.3s;
      }
    }
  }
}
</style>>
